<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/bootstrap-3.3.7-dist/css/bootstrap.css" >
</head>
<body>
<div class="container">
<!-- -->
<form >
    <input type="text" name="name">
    <input type="button" onclick="doSearch()" value="Search">
    <!-- @{}表达式为thymeleaf中定义url的一种表达式，会自动在url-->
    <button type="button" onclick="doAddUI()" class="btn btn-primary btn-sm">Add Brand</button>
</form>
    <table class="table">
    <thead>
    <tr>
        <th >id</th>
        <th>name</th>
        <th>remark</th>
        <th>createdTime</th>
        <th>operation</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="brand: ${list}">
        <td th:text="${brand.id}">10</td>
        <td th:text="${brand.name}">AAA</td>
        <td th:text="${brand.remark}">ddd</td>
        <td th:text="${#dates.format(brand.createdTime,'yyyy/MM/dd HH:mm')}">2020/10/11</td>
        <td><button type="button" th:onclick="doDeleteBrands([[${brand.id}]])">delete</button></td>
<!--            <a th:href="@{/brand/doDeleteBrands/{id}(id=${brand.id})}"><input type="button" value="delete" ></a>-->
        <td>
            <button type="button" th:onclick="doFindById([[${brand.id}]])" class="btn btn-danger btn-xs">update</button>
        </td>
    </tr><!-- 日期格式化的写法要参考官方文档19章dates菜单-->
    </tbody>
</table>
</div>
<script>
    function doAddUI(){
        location.href="/brand/doAddUI";
    }
    function doFindById(id){
        //执行删除业务
        location.href=`http://localhost/brand/doFindById/${id}`;
    }
    function doDeleteBrands(id){
        if(!confirm("你可以先删除雪刚"))return;
        //执行删除业务
        location.href=`http://localhost/brand/doDeleteBrands/${id}`;
    }
    function  doSearch() {
        <!-- -->
        //获取form表单中的数据
        let name=document.forms[0].name.value;
        console.log("name",name);
        //定义url
        let url=`http://localhost/brand/doFindBrands/${name}`;//rest
        //访问对应的url（这种形式的访问将来会改成异步）
        location.href=url;
    }
</script>
</body>
</html>